import React, { Component } from 'react';

export class App extends Component {
  constructor() {
    super();

    this.state = {
      // 创建组件需要的属性
      count: 0,
    };
    console.log('1 constructor');
    // console.log(document.getElementById('123'));
  }

  render() {
    console.log('2 render');
    console.log(
      'render',
      document.getElementById('234') && document.getElementById('234').innerText
    );
    // this.setState();
    return (
      <div>
        <h1 id={234}>{this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          +1
        </button>
        <hr />
        {this.state.count > 3 ? null : <Child />}
      </div>
    );
  }

  componentDidMount() {
    console.log('3 componentDidMount');
    // 获取网络数据
    // axios.get(xxx)

    // 拿到真实dom
    // console.log(document.getElementById('123'));
    // const div = document.getElementById('123');
    // console.log(div.innerHTML);
  }

  componentDidUpdate() {
    // 不能直接调用调用setState ?
    // if (this.state.count < 1) {
    //   console.log('====');
    //   this.setState({ count: 1 });
    // }

    console.log('4 componentDidUpdate');
    // 这里也可以拿到DOM
    console.log('updated', document.getElementById('234'));
    // const div = document.getElementById('123');
  }
}

class Child extends React.Component {
  constructor() {
    super();

    this.state = {
      // 创建组件需要的属性
      count: 0,
    };
    console.log('子=》1 constructor');
    // console.log(document.getElementById('123'));
    this.timerid = setInterval(() => {
      console.log('定时器，', this.timerid);
    }, 1000);

    window.addEventListener('resize', this.handleResize);
    window.addEventListener('resize', () => {
      console.log('匿名事件处理函数');
    });
  }

  handleResize = () => {
    console.log('resize....');
  };

  render() {
    console.log('子=》2 render');
    // console.log(document.getElementById('123'));
    // this.setState();
    return <div>子</div>;
  }

  componentDidMount() {
    console.log('子=》3 componentDidMount');
    // 获取网络数据
    // axios.get(xxx)

    // 拿到真实dom
    // console.log(document.getElementById('123'));
    // const div = document.getElementById('123');
    // console.log(div.innerHTML);
  }

  componentDidUpdate() {
    // 不能直接调用调用setState ?
    // if (this.state.count < 1) {
    //   console.log('====');
    //   this.setState({ count: 1 });
    // }

    console.log('子=》4 componentDidUpdate');
  }

  componentWillUnmount() {
    console.log('子=》4 componentWillUnmount 886');
    window.removeEventListener('resize', this.handleResize);
    clearInterval(this.timerid);
  }
}

export default App;
